<!--  -->
<template>
    <div class="hbh-container">
      <commonTitle :title="'近30日备月供水计划'" />
      <div class="ctBox">
        <div class="stCard"><span>设备状态</span><span>使用中</span></div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    name: "wdfour",
    components: {},
    data() {
      //这里存放数据
      return {};
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
  </script>
  <style lang="scss" scoped>
  //@import url(); 引入公共css类
  .hbh-container {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
  
    .ctBox {
      width: 100%;
      box-sizing: border-box;
      padding-left: 10px;
      height: 150px;
      .stCard {
        margin-top: 20px;
        padding-left: 20px;
        box-sizing: border-box;
        height: 100px;
        width: 100%;
        background-color: rgba(147, 178, 219, 0.3);
        border-radius: 50px;
        display: flex;
        align-items: center;
        // justify-content: center;
        padding: 30px;
        box-sizing: border-box;
        span:nth-of-type(1) {
          color: #fff;
          font-size: 16px;
          margin-right: 60px;
        }
        span:nth-of-type(2) {
          color: #00f8f4;
          font-size: 30px;
        }
      }
    }
  }
  </style>
  